<template>
  <div class="app-container">
    <div class="filter-container">

      <el-select
        v-model="orderReqDto.channelId"
        filterable
        clearable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option v-for="item in options" :key="item.channelId" :label="item.channel_name" :value="item.channelId" />
      </el-select>
      <el-input v-model="orderReqDto.name" placeholder="用户名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="orderReqDto.phone" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="orderReqDto.idNo" placeholder="身份证号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="orderReqDto.city" placeholder="城市" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select
        v-model="orderReqDto.eventState"
        filterable
        clearable
        :filter-method="pricedataFilter"
        placeholder="事件状态"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="用户愿意跟踪" :value="1">用户愿意跟踪</el-option>
        <el-option style="width: auto" label="电话打不通" :value="2">电话打不通</el-option>
        <el-option style="width: auto" label="用户拒绝跟踪" :value="3">用户拒绝跟踪</el-option>
        <el-option style="width: auto" label="等待跟踪" :value="4">等待跟踪</el-option>
        <el-option style="width: auto" label="其他" :value="5">其他</el-option>
      </el-select>
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="注册开始日期"
        end-placeholder="注册结束日期"
        style="width: 250px;"
        clearable
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <el-select
        v-model="orderReqDto.authState"
        placeholder="认证状态"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="ocr未认证" :value="1">ocr未认证</el-option>
        <el-option style="width: auto" label="联系人未认证" :value="2">联系人未认证</el-option>
        <el-option style="width: auto" label="基本信息未认证" :value="3">基本信息未认证</el-option>
        <el-option style="width: auto" label="银行卡未认证" :value="4">银行卡未认证</el-option>
        <!-- <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_PASSED'">前筛通过</el-option>
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_REJECT'">前筛拒绝</el-option>
        <el-option style="width: auto" label="准入通过" :value="'PUNG_PASSED'">准入通过</el-option>
        <el-option style="width: auto" label="准入失败" :value="'PUNG_REJECT'">准入失败</el-option>


        <el-option style="width: auto" label="授信表单提交成功" :value="'COMMIT_FORM_SUCCESS'">授信表单提交成功</el-option>
        <el-option style="width: auto" label="授信表单提交失败" :value="'COMMIT_FORM_FAIL'">授信表单提交失败</el-option>
        <el-option style="width: auto" label="授信成功" :value="'COMMIT_FORM_PASSED'">授信成功</el-option>
        <el-option style="width: auto" label="授信失败" :value="'COMMIT_FORM_REJECT'">授信失败</el-option>
        <el-option style="width: auto" label="放款审核失败" :value="'LEND_CHECK_REJECT'">放款审核失败</el-option>
        <el-option style="width: auto" label="放款审核成功" :value="'LEND_CHECK_PASSED'">放款审核成功</el-option>
        <el-option style="width: auto" label="放款失败" :value="'LEND_FAIL'">放款失败</el-option>
        <el-option style="width: auto" label="放款成功" :value="'LEND_FINISHED'">放款成功</el-option>
        <el-option style="width: auto" label="还款成功" :value="'REPAYMENT_FINISHED'">还款成功</el-option> -->
      </el-select>
      <!-- <el-select
        v-model="orderReqDto.state"
        placeholder="准入状态"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="准入成功" :value="1">准入成功</el-option>
        <el-option style="width: auto" label="准入失败" :value="2">准入失败</el-option>
        <el-option style="width: auto" label="前筛失败" :value="3">前筛失败</el-option>
      </el-select>
      <el-select
        v-model="orderReqDto.tate"
        placeholder="审核状态"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="审核通过" :value="1">审核通过</el-option>
        <el-option style="width: auto" label="审核拒绝" :value="2">审核拒绝</el-option>
        <el-option style="width: auto" label="审核中" :value="3">审核中</el-option>
      </el-select>
      <el-select
        v-model="orderReqDto.state"
        placeholder="放款状态"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="放款成功" :value="1">放款成功</el-option>
        <el-option style="width: auto" label="放款失败" :value="2">放款失败</el-option>
        <el-option style="width: auto" label="放款中" :value="3">放款中</el-option>
      </el-select> -->

      <!-- <el-checkbox-group v-model="checkedperiods" @change="handleCheckedperiodsChange">
        <el-checkbox v-for="period in periods" :key="period.id" :label="period.id">{{ period.name }}</el-checkbox>
      </el-checkbox-group> -->

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-if="roles.includes('super')" v-waves class="filter-item" type="primary" @click="handleOut">
        导出
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column
        label="编号"
        align="center"
        type="index"
        width="50"
      />

      <el-table-column label="渠道" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.channelNick }}</span>
        </template>
      </el-table-column>

      <el-table-column label="姓名" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="110" align="center">
        <template slot-scope="{row}">
          {{ row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="身份证" width="170" align="center">
        <template slot-scope="{row}">
          {{ row.certNo }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" min-width="60" align="center">
        <template slot-scope="{row}">
          <span>{{ row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" min-width="60" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sex ===1?'男':'女' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地区" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="认证状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.authState }}</span>
          <!-- <el-tag v-if="row.authState == 0" type="info">创建订单</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="OCR认证" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.ocrState }}</span>
          <!-- <el-tag v-if="row.authState == 0" type="info">创建订单</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="联系人认证" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.contactState }}</span>
          <!-- <el-tag v-if="row.authState == 0" type="info">创建订单</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="基本信息认证" class-name="status-col" width="110">
        <template slot-scope="{row}">
          <span>{{ row.baseState }}</span>
          <!-- <el-tag v-if="row.authState == 0" type="info">创建订单</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="银行卡认证" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.bankCardState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" min-width="160" align="center">
        <template slot-scope="{row}">
          <span>{{ row.registerTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后登录时间" min-width="160" align="center">
        <template slot-scope="{row}">
          <span>{{ row.lastLoginTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="跟踪时间" min-width="160" align="center">
        <template slot-scope="{row}">
          <span>{{ row.trackTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="事件状态" class-name="status-col" width="120">
        <template slot-scope="{row}">
          <!-- <span>{{ row.eventType }}</span> -->
          <el-tag v-if="row.eventType == 1" type="info">用户愿意跟踪</el-tag>
          <el-tag v-if="row.eventType == 2" type="info">电话打不通</el-tag>
          <el-tag v-if="row.eventType == 3" type="info">用户拒绝跟踪</el-tag>
          <el-tag v-if="row.eventType == 4" type="info">等待跟踪</el-tag>
          <el-tag v-if="row.eventType == 5" type="info">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="190" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            用户信息
          </el-button>
          <el-button type="primary" size="mini" @click="handleElc(row)">
            电销跟踪
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="orderReqDto.current"
      :limit.sync="orderReqDto.size"
      @pagination="orderAuth"
    />

    <el-dialog :title="textMap[dialogStatus]" width="80%" :visible.sync="dialogFormVisible">
      <div class="main-title-con">
        <div class="nick" @click="changeTitleCheck(1)">
          <span>用户信息</span>
          <p v-if="mainTitleCheck===1" class="underline" />
        </div>
        <div class="nick" @click="changeTitleCheck(2)">
          <span>电销跟踪</span>
          <p v-if="mainTitleCheck===2" class="underline" />
        </div>
      </div>


      <UserDetail v-if="mainTitleCheck===1" :user-base-info="userBaseInfo" />


      <div v-if="mainTitleCheck===2">
        <p>事件信息</p>

        <p v-for="(item,index2) in refundDetail.events" :key="index2+11" style="margin-left: 20px;">
          {{ item }}
        </p>

        <p style="margin-top:20px">备注信息</p>
        <div
          v-for="(item1,index1) in refundDetail.noteMes"
          :key="index1+1"
          style="margin-top:20px;margin-left: 20px;
            border: 1px solid;
            border-radius: 4px;
            padding: 5px;"
        >
          <p>备注时间：{{ item1.time }}</p>
          <p>备注人：{{ item1.remarkPerson }}</p>
          <p>备注内容：{{ item1.remarkText }}</p>
        </div>

        <p style="margin-top:20px;color:#4581e8;font-weight:600">新增记录</p>

        <el-select
          v-model="refundDetail.userInfo.eventType"
          clearable
          placeholder="请选择事件（必选一）"
          style="width: 200px;margin-left:20px;margin-bottom:20px;border: 1px solid #4581e8;
              border-radius: 4px;"
          class="filter-item"
        >
          <el-option style="width: auto" label="用户愿意跟踪" :value="1">用户愿意跟踪</el-option>
          <el-option style="width: auto" label="电话打不通" :value="2">电话打不通</el-option>
          <el-option style="width: auto" label="用户拒绝跟踪" :value="3">用户拒绝跟踪</el-option>
          <el-option style="width: auto" label="等待跟踪" :value="4">等待跟踪</el-option>
          <el-option style="width: auto" label="其他" :value="5">其他</el-option>
        </el-select>
        <textarea
          v-model="refundDetail.userInfo.remarks"
          placeholder="请输入内容...（选填）"
          cols="30"
          rows="10"
          style="margin-left: 20px;width: 95%;border-radius:4px"
        />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="mainTitleCheck===2" type="success" @click="update">
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import { orderAuth, userInfoDetail, getChannelIdAndNick, getPhoneUserDetail
  , saveUserInfotrack, exportUserInfo } from '@/api/user'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
// 用户详情组件
import UserDetail from '@/components/userDetail'
export default {
  // 认证用户
  name: 'Orderlist',
  components: { Pagination, UserDetail },
  directives: { waves },
  data() {
    return {
      checkAll: false,
      checkedperiods: [],
      periods: [{ name: '畅行花', id: 1 }, { name: '洋钱罐', id: 2 }, { name: '数钥', id: 3 }, { name: '小赢', id: 4 }],
      isIndeterminate: true,
      mainTitleCheck: 1,
      tableData: [],
      flowList: [
        {
          from: '支付宝',
          flowNo: '202005121548784',
          gmt_datetime: '2020-05-12 1548784',
          state: 1,
          note: '超时' },
        {
          from: '支付宝',
          flowNo: '202005121548786',
          gmt_datetime: '2020-05-13 1548784',
          state: 0,
          note: '已支付' }
      ],
      times: [],
      total: 0,
      tableKey: 0,
      orderReqDto: {
        size: 10,
        current: 1,
        startTime: '',
        endTime: '',
        phone: '',
        username: '',
        orderNo: ''
      },
      refundDetail: {
        userInfo: {},
        events: {},
        noteMes: {}
      },
      countOrder: {},
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '订单流水'
      },
      userId: 0,
      userBaseInfo: {
        userDevice: {},
        user: {},
        userAccount: {},
        userLiveOcrLog: {},
        userMes: {},
        userContactMes: {}
      },
      dialogPvVisible: false,
      listLoading: false,
      orderNoForDetail: '',
      optionsCopy: [],
      options: [],
      priceoptionsCopy: [],
      priceoptions: [],
      multipleSelection: [],
      value: ''
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created() {
    this.roles = store.getters && store.getters.roles
    this.orderAuth()
    this.getChannelIdAndNick()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleOut() {
      let contract = ''
      this.multipleSelection.forEach((element, index) => {
        if ((index + 1) !== this.multipleSelection.length) {
          contract = contract + element.userId + ','
        } else {
          contract += element.userId
        }
      })
      exportUserInfo({ ufIds: contract }).then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.data
          // this.$notify({
          //   title: '成功！',
          //   message: '导出成功',
          //   type: 'success',
          //   duration: 2000
          // })
        } else if (res.data.code === 100001) {
          this.$notify({
            title: '失败！',
            message: '您没有该权限，请联系管理员',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    changeTitleCheck(type) {
      if (type === 1) {
        this.mainTitleCheck = 1
        this.handleUpdate({ userId: this.userId, loanAppId: this.loanAppId })
      } else if (type === 2) {
        this.mainTitleCheck = 2
        this.handleElc({ userId: this.userId, loanAppId: this.loanAppId })
      }
    },
    handleElc(row) {
      this.userId = row.userId
      this.loanAppId = row.loanAppId
      this.mainTitleCheck = 2
      this.refundDetail.userInfo = {}
      try {
        userInfoDetail({ userId: row.userId, loanAppId: row.loanAppId, orderType: 1 }).then(res => {
          this.refundDetail.events = res.data.data.events || { }
          this.refundDetail.noteMes = res.data.data.noteMes || { }

          this.dialogFormVisible = true
        })
      } catch (error) {
        console.log(error)
      }
    },
    async update() {
      if (this.refundDetail.userInfo.eventType === undefined || this.refundDetail.userInfo.eventType === null || this.refundDetail.userInfo.eventType === '') {
        this.$notify({
          title: '提示！',
          message: '新增记录必选',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.refundDetail.userInfo.trackId = this.avatar
      this.refundDetail.userInfo.userId = this.userId
      this.refundDetail.userInfo.loanAppId = this.loanAppId
      this.refundDetail.userInfo.orderType = 1
      const res = await saveUserInfotrack(this.refundDetail.userInfo)
      this.dialogFormVisible = false
      if (res.data.code === 200) {
        this.$notify({
          title: '成功！',
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
      } else {
        this.$notify({
          title: '失败！',
          message: '保存失败',
          type: 'error',
          duration: 2000
        })
      }
      this.orderAuth()
    },
    async handleUpdate(row) {
      this.mainTitleCheck = 1
      this.userId = row.userId
      this.loanAppId = row.loanAppId
      const res = await getPhoneUserDetail({ 'userId': row.userId })
      if (res.data.data === null) {
        this.$notify({
          title: '错误',
          message: '获取失败',
          type: 'fail',
          duration: 2000
        })
      }
      this.userBaseInfo = res.data.data
      // this.userBaseInfo.loanApps = [{ appName: '1', gmtDatetime: '2323' }, { appName: '2', gmtDatetime: '22323' }]
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handleCheckedperiodsChange(value) {
      // console.log(this.checkedperiods.toString())
      const checkedCount = value.length
      this.checkAll = checkedCount === this.periods.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.periods.length
    },
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.label !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    pricedataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.priceoptions = this.priceoptionsCopy.filter((item) => {
          console.log(item)
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.priceoptions = this.priceoptionsCopy
      }
    },
    // 获取订单列表
    async orderAuth() {
      const res = await orderAuth(this.orderReqDto)
      if (res.data.data === null) {
        this.tableData = null
      } else {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }
    },

    handleFilter() {
      this.orderReqDto.current = 1
      this.orderReqDto.lendingAgency = this.checkedperiods.toString
      if (this.times == null) {
        this.orderReqDto.endTime = ''
        this.orderReqDto.startTime = ''
      } else if (this.times.length === 0) {
        this.orderReqDto.endTime = ''
        this.orderReqDto.startTime = ''
      } else {
        this.orderReqDto.endTime = this.times[1]
        this.orderReqDto.startTime = this.times[0]
      }
      this.orderAuth(this.orderReqDto)
    },
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
td{
  width: 25%;
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 500;
  color: #333;
  font-size: 20px;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  text-align: right;
  color:#666;
  font-size: 20px;
}
.title-con{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.title{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 28px;
  font-weight: 400;
  /* border-bottom: 1px dashed #304156; */
  padding-bottom: 10px;
  vertical-align: middle;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  width: 120px;
  margin: 0 10px;
  padding-bottom: 10px;
}
.link-title {
  height: 10px;
  display: inline-block;
  width: calc(100% - 175px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.link-title-5 {
  height: 10px;
  display: inline-block;
  width: calc(100% - 199px);
  margin-left: 10px;
  border-top: dashed rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.line{
  display: inline-block;
  height: 28px;
  width: 4px;
  background: #425DE5;
  border-radius: 2px;
  vertical-align: -4px;
}
.table-width{
  width: 99%;
}
.tr-width{
  width: 99%;
}
table{
  letter-spacing:1.5px;
}
.info-img{
  width: 243px;
  height: 153px;
}
.main-title-con{
  display: flex;
  justify-content: center ;
}
.underline{
  width:100px;
  height:4px;
  border-radius:2px;
  background:#425DE5;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
